<template>
  <page-wrap stay-still back hide-tab title="服务总结">
    <view class="summary">
      <view class="summary-header">
        <view class="service-title">
          <text class="title">服务名称：</text>
          <text class="value">{{ serviceName }}</text>
        </view>
        <view class="user-info">
          <text class="item">{{ userInfo.username }}</text>
          <view class="line"></view>
          <text class="item">{{ userInfo.userSex }}</text>
          <view class="line"></view>
          <text class="item">{{ userInfo.userAge }}</text>
        </view>
      </view>
      <view class="summary-detail">
        <view
          class="summary-detail-item"
          v-for="(item, index) in summaryList"
          :key="index"
        >
          <block
            v-if="
              item.dataType == 13 || item.dataType == 12 || item.dataType == 11
            "
          >
            <text class="label">{{ item.dataTypeDesc }}</text>
            <view class="value flex" @click="handleCheckReport(item)">
              <text>{{ getReportName(item.content) }}</text>
              <image class="img" :src="rightArrow"></image>
            </view>
          </block>
          <block v-else>
            <text class="label">{{ item.dataTypeDesc }}</text>
            <view class="value">{{ item.content }}</view>
          </block>
        </view>
      </view>
    </view>
    <view :show="loading"></view>
  </page-wrap>
</template>

<script>
import CryptoJS from "crypto-js";
import { viewServiceSummary } from "@/api/modules/career";
import RegionFilter from "@/components/RegionFilter";
import ShareMixin from "@/mixins/share";
export default {
  mixins: [ShareMixin],
  components: {
    RegionFilter,
  },
  data() {
    return {
      personId: uni.getStorageSync("person-id").slice(2) || undefined,
      rightArrow: this.$imgBase + "career/careerAssessResult/right-arrow.png",
      summaryList: [],
      serviceId: "",
      serviceRecordId: "",
      serviceName: "",
      userInfo: {},
    };
  },
  computed: {
    formattedDate: function () {
      var today = new Date(); //获取当前时间
      var month = (today.getMonth() + 1).toString().padStart(2, "0"); //获取月份，不足两位的前面补0
      var year = today.getFullYear().toString().substr(0); //获取年份的后两位
      var day = today.getDate().toString().padStart(2, "0"); //获取天数，不足两位的前面补0
      return `${year}-${month}-${day}`; //拼接成mm-yy-dd的格式
    },
  },
  watch: {},
  created() {},
  onShow() {},
  onLoad(opt) {
    this.serviceName = opt.serviceName || "服务总结";
    this.serviceId = opt.serviceId || "";
    this.serviceRecordId = opt.serviceRecordId || "";
  },
  mounted() {
    this.viewServiceSummaryFn();
  },
  methods: {
    handleCheckReport(report) {
      if (!report.content) {
        return;
      }

      const item = JSON.parse(report.content);
      let url =
        "/pagesSub/companyCenter/case/detail?id=" +
        item.activityIdCode +
        "&&isFromZhishenji=" +
        1 +
        "&&isGetCollect=" +
        1 +
        "&&showType=report";

      url +=
        "&&sourceFrom=" + this.encrypt("zhishenji" + this.formattedDate, "");

      if (!item.activityTypeCode) return;
      uni.navigateTo({
        url,
      });
      // if (item.activityTypeCode == "CAREER_CASE") {
      //   uni.navigateTo({ url });
      //   // uni.navigateTo({
      //   //   url: "/pagesSub/companyCenter/case/detail?id=" + item.activityIdCode,
      //   // });
      // } else if (item.activityTypeCode == "CAREER_REPORT") {
      //   uni.navigateTo({
      //     url:
      //       "/pagesSub/companyCenter/report/detail?id=" + item.activityIdCode,
      //   });
      // }
    },
    encrypt(word, keyStr) {
      // word, keyStr第一个参数是加密的字段名字  第二个是key值（16位）
      keyStr = keyStr || "*%&^%$&*()347845"; // 密文（密钥）
      var key = CryptoJS.enc.Utf8.parse(keyStr);
      var srcs = CryptoJS.enc.Utf8.parse(word);
      var encrypted = CryptoJS.AES.encrypt(srcs, key, {
        mode: CryptoJS.mode.ECB,
        padding: CryptoJS.pad.Pkcs7,
      });
      return encrypted.toString();
    },
    handleToDetail(item) {
      let url =
        "/pagesSub/companyCenter/case/detail?id=" +
        item.activityIdCode +
        "&&isFromZhishenji=" +
        1 +
        "&&isGetCollect=" +
        1 +
        "&&showType=report";

      url +=
        "&&sourceFrom=" + this.encrypt("zhishenji" + this.formattedDate, "");
      uni.navigateTo({
        url,
      });
    },
    getReportName(content) {
      if (!content) {
        return "";
      } else {
        return JSON.parse(content).activityName || "";
      }
    },
    viewServiceSummaryFn() {
      this.loading = true;
      const params = {
        serviceId: this.serviceId,
        serviceRecordId: this.serviceRecordId,
      };
      viewServiceSummary(params)
        .then((res) => {
          if (res.code == 200) {
            let temp = [];
            res.data.forEach((item) => {
              if (item.dataTypeDesc == "用户姓名") {
                this.userInfo.username = item.content;
              } else if (item.dataTypeDesc == "用户年龄") {
                this.userInfo.userAge = item.content;
              } else if (item.dataTypeDesc == "用户性别") {
                this.userInfo.userSex = item.content;
              } else {
                temp.push(item);
              }
            });
            temp.sort((a, b) => a.orderNum - b.orderNum);
            this.summaryList = temp;
          }
        })
        .finally(() => {
          this.loading = false;
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.summary {
  padding: 24rpx;
  display: flex;
  flex-direction: column;
  &-header {
    background: linear-gradient(270deg, #ffc081 0%, #ff711e 100%);
    border-radius: 16rpx;
    padding: 32rpx;
    color: #fff;
    .service-title {
      .title {
        font-size: 36rpx;
        color: #fff;
      }
      .value {
        font-size: 36rpx;
        color: #fff;
      }
    }
    .user-info {
      display: flex;
      align-items: center;
      margin-top: 24rpx;
      .line {
        width: 2rpx;
        height: 22rpx;
        background-color: #fff;
        margin: 0 16rpx;
      }
    }
  }
  &-detail {
    margin-top: 32rpx;
    border-radius: 16rpx;
    background-color: #fff;
    overflow: hidden;
    box-sizing: border-box;
    &-item {
      display: flex;
      flex-direction: column;
      .label {
        padding: 24rpx;
        padding-bottom: 20rpx;
        font-size: 32rpx;
        font-weight: 600;
        color: #555;
      }
      .value {
        padding: 24rpx;
        padding-top: 0;
        font-size: 28rpx;
      }
      .flex {
        display: flex;
        justify-content: space-between;
      }
      .img {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}
</style>
